<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #5a6268;
            margin: 100px auto;
            animation: go 12s;
        }

        @keyframes go {
            0% {
                background-color: aquamarine;
            }

            25% {
                background-color: black;
            }

            75% {
                background-color: coral;
            }

            100% {
                background-color: darkred;
            }
        }

        .car img {
            width: 200px;
            animation: run 10s infinite;
        }

        @keyframes run {

            0% {
                transform: translateX(0);
            }

            50% {

                transform: translateX(400px);
            }

            51% {
                transform: translate3d(400px,0,0) rotateY(180deg);
            }

            100% {
                transform: translate3d(0,0,0) rotateY(180deg);
            }
        }
    </style>
</head>
<body>
<div class="box">

</div>

<div class="car">
    <img src="images/timg.jpeg"/>
</div>
</body>
</html>
